<template>
	<view>
		<cu-custom :isBack="true" style="color: #fff;" bgColor="bg-gradual-fff">
			<block slot="content" style="color: #fff;">TOM 王帅</block>
		</cu-custom>
		<u-loading-page :loading="true" loading-text="loading..." v-if="showLoading"></u-loading-page>
		<view v-show="!showLoading">
			<view class="viewbox" style="background-color:#0B000C;"></view>
			
			<view class="parse1">
				<view class="avatar">
					<u-avatar :src="src"></u-avatar>
					<!-- <u-avatar :text="text"></u-avatar> -->
				</view>
			</view>
			<view class="group1">
				<view class="parse2">
					<view class="name1">TOM王帅</view>
					<view class="tab1">失眠 | 成长 | 素质</view>
				</view>
				<view class="parse3">
					<view class="xj">星级</view>
					<view class="xing"><u-rate :value="4" disabled active-color="#FBC509" gutter="5" size="30rpx"></u-rate></view>
				</view>
				<view class="parse4">
					<view class="yp">从业4年 | 累计服务2003学员</view>
				</view>
			</view>
			
			
			<view class="xiangqing">
				<view class="fenlei">
					<u-tabs 
						:list="list1" 
						@click="click" 
						lineColor="#CC8FBD"
						:activeStyle="{
						            color: '#CC8FBD',
						            fontWeight: 'bold',
						            transform: 'scale(1.05)'
						        }"
						:inactiveStyle="{
						            color: '#FFFFFF',
						            transform: 'scale(1)'
						        }"
						>
					</u-tabs>
				</view>
				
				<!-- 导师介绍 -->
				<view class="introduce" v-if="currentTab === 0">
					情感导师是专门从事情感咨询的专业人士，他们通过提供心理支持和指导，帮助人们解决情感问题，促进个人成长和关系改善。 情感导师通常具有心理学或相关领域的专业背景，能够运用专业的知识和技能，帮助客户解决情感困扰，提升自我认知和情感管理能力。
				</view>
				
				<!-- 课程推荐 -->
				<view class="kecheng" v-if="currentTab === 1">
					<view class="kc1">
						<view class="kc_name">这个是视频课程名称（视频课程）</view>
						<view class="money">
							<view class="m1">￥</view>
							<view class="m2">3.5</view>
							<view class="m3">+</view>
							<view class="m4">积分</view>
							<view class="m5">56</view>
						</view>
						<view class="ab">
							<view class="yufan">下单预计返65积分</view>
							<view class="yishou">已售325</view>
						</view>
					</view>
				</view>
				
				<!-- 评价 -->
				<view class="pingjia">
					
				</view>
					
			</view>
			
			
			<view class="b">
				<button class="btn">咨询</button>
			</view>
			
			
			
		</view>	
	</view>
</template>
<script>
	export default {
			data() {
				return {
					src: '',
					currentTab:0,
					// text: '无头像'
					list1: [{
								name: '导师介绍',
								
							}, {
								name: '课程推荐',
								
					        }, {
					            name: '评价'
							}]
				}
			},
			methods: {
			            click(item) {
			                console.log('item', item);
							this.currentTab = item.index;
			            }
					}
		}
</script>

<style  lang="scss" scoped>
	.avatar{
		width: 140rpx;
		height: 140rpx;
		background: #E4CBDF;
		border-radius: 50%;
		position: absolute;
		top: 204rpx;
		left: 305rpx;
		z-index: 1;
	}
	.group1{
		position: absolute;
		margin-left: 25rpx;
		top: 269rpx;
		width: 700rpx;
		height: 300rpx;
		background: linear-gradient(-57deg, #734FB5, #BC82BB);
		border-radius: 20rpx;
		// padding-top: 55rpx;
		// padding-left: 42rpx;
	}
	.name1{
		width: 137rpx;
		height: 29rpx;
		font-family: PingFang SC;
		font-weight: 800;
		font-size: 30rpx;
		color: #FFFFFF;
		position: absolute;
		margin-top: 102rpx;
		margin-left: 281rpx;
		// line-height: 36rpx;
	}
	.tab1{
		position: absolute;
		margin-top: 142rpx;
		margin-left: 266rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 22rpx;
		color: #FFFFFF;
	}
	.parse3{
		display: flex;
		position: absolute;
		margin-top: 201rpx;
		margin-left: 42rpx;
	}
	.xj{
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #FFFFFF;
	}
	.yp{
		position: absolute;
		margin-top: 240rpx;
		margin-left: 42rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #FFFFFF;
	}
	.xiangqing{
		width: 700rpx;
		height: auto;
		background: #210B2A;
		border-radius: 20rpx;
		border: 1px solid #583770;
		// position: absolute;
		margin-top: 442rpx;
		margin-left: 25rpx;
		
		margin-bottom: 30rpx;
	}
	.b{
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 0rpx 0rpx;
		border: 1px solid #F2F2F2;
		position: fixed;
		
		bottom: 0rpx;
	}
	.btn{
		width: 330rpx;
		height: 88rpx;
		background: #62469B;
		border-radius: 44rpx;
		margin-top: 16rpx;
		
		
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #FFFFFF;
	}
	.introduce{
		width: 597rpx;
		// height: 649rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #FFFFFF;
		line-height: 48rpx;
		margin-top: 57rpx;
		margin-left: 50rpx;
		margin-bottom: 45rpx;
	}
	.kc1{
		margin-top: 92rpx;
		margin-left: 40rpx;
		margin-bottom: 40rpx;
		width: 620rpx;
		// height: 220rpx;
		height: auto;
		border-radius: 10rpx;
		border: 1px solid #351740;
	}
	.kc_name{
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #FFFFFF;
		margin-top: 44rpx;
		margin-left: 37rpx;
	}
	.money{
		display: flex;
		margin-left: 38rpx;
		margin-top: 30rpx;
		// border: 1rpx #FFFFFF solid;
	}
	.m1,.m3,.m4{
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #FF6000;
		line-height: 36rpx;
	}
	.m2,.m5{
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 36rpx;
		color: #FF6000;
		line-height: 36rpx;
	}
	.ab{
		display: flex;
		margin-top: 32rpx;
		margin-bottom: 70rpx;
	}
	.yufan{
		position: absolute;
		margin-left: 38rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #FFFFFF;
	}
	.yishou{
		position: absolute;
		right: 92rpx;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #FFFFFF;
	}
</style>
